<template>
	<div class="bi">
		<bi-header @getHeaderHeight="getHeaderHeight"></bi-header>
		<div :style="contentStyle">
			<div class="bi_data_content">
				<div class="date_selcet">
					<DatePicker @on-change="dateChange" type="month" :value="biDate" :clearable="false"></DatePicker>
				</div>
				<div class="data_top">
					<!-- 作业风险 -->
					<bi-zyfx ref="zyfx" @zyfxclick="zyfxClik"></bi-zyfx>
					<!-- 风险预测 -->
					<bi-fxyc ref="fxyc" @fxycclick="fxycClik"></bi-fxyc>
				</div>
				<div class="data_bottom">
					<!-- 风险销号 -->
					<bi-fxxh></bi-fxxh>
					<!-- 动态管控 -->
					<bi-dtgk ref="dtgk" @dtgkclick="dtNameClick" :bidate="biDate"></bi-dtgk>
				</div>
			</div>
		</div>
		<div class="bi-modal" v-show="dialogFlag">
			<div class="modal_box">
				<i class="task_risk_close ivu-icon ivu-icon-ios-close" @click="dialogClose"></i>
				<!-- 图表展示 -->
				<div class="dialog-title" @click="dialogTitleClick">{{dialogTitle}}</div>
				<div v-if="zyfxDetail">
					<div class="fx-item">
						<span>风险总数:{{fxDetailData.statistics.total}}项</span>
						<span>I级风险:{{fxDetailData.statistics.firstLevel}}项 </span>
						<span>II级风险:{{fxDetailData.statistics.secondLevel}}项</span>
						<span>III级风险:{{fxDetailData.statistics.thirdLevel}}项</span>
						<span>IV级风险:{{fxDetailData.statistics.fourthLevel}}项</span>
					</div>
					<div class="dialog_data">
						<bar-echarts @barclick="zyfxdDetailClik" btnhidden="true" barid="zyfxDetailId" :barx="fxDetailData.xData" :bary="fxDetailData.yData"></bar-echarts>
					</div>
				</div>
        <div v-if="fxycDetail">
        	<div class="fx-item">
        		<span>风险总数:{{fxycDetailData.statistics.total}}项</span>
        		<span>I级风险:{{fxycDetailData.statistics.firstLevel}}项 </span>
        		<span>II级风险:{{fxycDetailData.statistics.secondLevel}}项</span>
        		<span>III级风险:{{fxycDetailData.statistics.thirdLevel}}项</span>
        		<span>IV级风险:{{fxycDetailData.statistics.fourthLevel}}项</span>
        	</div>
        	<div class="dialog_data">
        		<bar-echarts @barclick="fxycDetailClik" btnhidden="true" barid="fxycDetailId" :barx="fxycDetailData.xData" :bary="fxycDetailData.yData"></bar-echarts>
        	</div>
        </div>
				<div v-if="dtgkDetail" style="height: 80%;width: 90%;margin: 5% auto;">
					<div style="height:50%;">
						<div style="float:left;width: 25%; height:100%;">
							<div style="color: #2FB5B7;">动态管控</div>
							<div style="color: #2FB5B7;font-size: 13px;margin-top: 5px;">在施风险:{{dtgkDetailData.totalZsfx}}项</div>
							<div style="height:calc(100% - 20px);">
								<pie-echarts pieid="dtgkpieId" piename="在施风险" :piecolor="pieColorFour" :piedata="dtgkDetailData.zsfxPie"></pie-echarts>
							</div>
						</div>
						<div style="width:75%;height:100%;float: right;">
							<bar-echarts barid="dtgkBarId" @barclick="gkxqClick" btnhidden="true" :barx="dtgkDetailData.barData.xData" :bary="dtgkDetailData.barData.yData"></bar-echarts>
						</div>
					</div>
					<div style="height:50%;position: relative;">
						<div style="float:left;width: calc(25% + 120px); height:100%;">
							<div style="color: #2FB5B7;font-size: 13px;margin-top: 2%;">过程管控:{{dtgkDetailData.totalGcgk}}项</div>
							<div id="course_manage1" style="height:90%;width:calc(100% - 120px);float: left;">

								<pie-echarts pieid="dtgkpieId1" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkDetailData.gcgkPie1"></pie-echarts>
							</div>
							<div id="course_manage2" style="height:70%;width:120px;float: right;margin-top:7%;">
								<pie-echarts pieid="dtgkpieId2" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkDetailData.gcgkPie2"></pie-echarts>
							</div>
						</div>
						<div style="width:calc(75% - 120px);height:100%;float: right;">
							<line-echarts lineid="dtgkLineId" :linename="['管控数据','管控到位数据']" linetype="twoLine" :linedatax="dtgkDetailData.lineData.lineDataX"
							 :linedatay="dtgkDetailData.lineData.lineDataY" :linedatay1="dtgkDetailData.lineData.lineDataY1"></line-echarts>
						</div>
					</div>
				</div>
				<div v-if="dtgkEjDetail" style="height: 80%;width: 90%;margin: 6% auto;">
					<div style="height:50%;">
						<div style="width:50%;height:100%;float: left;">
							<div style="color: #2FB5B7;font-size: 13px;margin-top: 2%;">在施风险:{{dtgkDetailEjData.totalZsfx}}项</div>
							<bar-echarts barid="gkxqBarId" bartype="2"  btnhidden="true" :barx="dtgkDetailEjData.barData.yData" :bary="dtgkDetailEjData.barData.yData"></bar-echarts>
						</div>
						<div style="float:left;width: 50%; height:100%;">
							<div style="color: #2FB5B7;font-size: 13px;margin-top: 2%;">过程管控:{{dtgkDetailEjData.totalGcgk}}项</div>
							<div id="course_manage1" style="height:90%;width:50%;float: left;">
								<pie-echarts pieid="gkxqpieId1" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkDetailEjData.gcgkPie1"></pie-echarts>
							</div>
							<div id="course_manage2" style="height:90%;width:50%;float: right;">
								<pie-echarts pieid="gkxqpieId2" piename="过程管控" :piecolor="pieColorTwo" :piedata="dtgkDetailEjData.gcgkPie2"></pie-echarts>
							</div>
						</div>

					</div>
					<div style="height:50%;position: relative;">
						<div style="color: #2FB5B7;font-size: 13px;margin-top: 30px;">过程管控:趋势图</div>
						<div style="height:calc(100% - 50px)">
							<line-echarts lineid="gkxqLineId" :linename="['管控数据','管控到位数据']" linetype="twoLine" :linedatax="dtgkDetailEjData.lineData.lineDataX"
							 :linedatay="dtgkDetailEjData.lineData.lineDataY" :linedatay1="dtgkDetailEjData.lineData.lineDataY1"></line-echarts>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BiHeader from '%/modules/bi/BiHeader'
	import BiZyfx from '%/modules/bi/BiZyfx'
	import BiFxyc from '%/modules/bi/BiFxyc'
	import BiFxxh from '%/modules/bi/BiFxxh'
	import BiDtgk from '%/modules/bi/BiDtgk'
	import BarEcharts from '%/modules/bi/BarEcharts'
	import PieEcharts from '%/modules/bi/PieEcharts'
	import LineEcharts from '%/modules/bi/LineEcharts'
	export default {
		name: 'bi',
		components: {
			BiHeader,
			BiZyfx,
			BiFxxh,
			BiFxyc,
			BiDtgk,
			BarEcharts,
			PieEcharts,
			LineEcharts
		},
		mounted() {},
		data() {
			return {
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				headerHeight: "40px",
				contentStyle: {
					height: 'calc(100% - 70px)'
				},
				biDate: new Date().getFullYear() + "-" + ('00' + (new Date().getMonth() + 1)).slice(-2),
				// 作业风险详情
				fxDetailData:{
					statistics:{},
					xData:[],
					yData:{
						firstRisk:[],
						secondRisk:[],
						thirdRisk:[],
						fourthRisk:[]
					}
				},
        // 风险预测详情
        fxycDetailData:{
        	statistics:{},
        	xData:[],
        	yData:{
        		firstRisk:[],
        		secondRisk:[],
        		thirdRisk:[],
        		fourthRisk:[]
        	}
        },
				//动态管控详情
				dtgkDetailData: {
					statistics: null,
					barData: {
						xData: [],
						yData: {
							firstRisk: [],
							secondRisk: [],
							thirdRisk: [],
							fourthRisk: []
						}
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
            lineDataY1: [],
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				},
				//动态管控详情二级
				dtgkDetailEjData: {
					statistics: null,
					barData: {
						xData:['I级风险', 'II级风险', 'III级风险', 'IV级风险'],
						yData:[]
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
						lineDataY1: [],
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				},
				jumpId:"",
				dialogFlag: false,
				dialogTitle: "",
        tempDialogTitle:"",
				zyfxDetail: false,
				dtgkDetail: false,
        fxycDetail:false,
				dtgkEjDetail: false,
				pieColorFour: ['#ED4C46', '#F49F42', '#EEDD78', '#3090B8'],
				pieColorTwo: ["#8689B4", "#81C7CA"],
			}
		},
		methods: {
			getHeaderHeight(hw) {
				this.headerHeight = (hw) + "px";
				this.contentStyle = {
					height: 'calc(100% - ' + this.headerHeight + ')'
				}
			},
			dateChange(date) {
				console.log(date)
				this.biDate = date;
				this.$refs.dtgk.getDtgkData(null,date);
			},

			// 作业风险点击
			zyfxClik(id, value) {
				this.dialogFlag = true;
				this.dialogTitle = value + "作业风险详情";
				this.zyfxDetail = true;
				this.dtgkDetail = false;
				this.dtgkEjDetail = false;
        this.fxycDetail = false;

				this.$refs.zyfx.getZyfxData(id, 'detail', this.fxDetailData);
			},
			//作业风险详情点击
			zyfxdDetailClik(index, value) {
				let orgId = this.fxDetailData.statistics.statisticsDetail[index].id;
				let jumpUrl =  this.fxDetailData.statistics.statisticsDetail[index].type == 1?"general-identification-ledger":"dynamic-identification-ledger";
				this.$router.push({
					name: jumpUrl,
					query: {
						orgId: this.userDetail.enterpriseId,
						projectId: orgId
					}
				})
			},
      // 风险预测点击
      fxycClik(id, value, dateText) {
      	this.dialogFlag = true;
      	this.dialogTitle = value + dateText + "作业风险详情";
      	this.zyfxDetail = false;
      	this.dtgkDetail = false;
      	this.dtgkEjDetail = false;
      	this.fxycDetail = true;
        console.log(id)
      	this.$refs.fxyc.getFxycData(id, id, 'detail', this.fxycDetailData);
      },
      //风险预测详情点击
      fxycDetailClik(index, value) {
      	let orgId = this.fxycDetailData.statistics.statisticsDetail[index].id;
        let jumpUrl =  this.fxycDetailData.statistics.statisticsDetail[index].type == 1?"general-identification-ledger":"dynamic-identification-ledger";

      	this.$router.push({
      		name: jumpUrl,
      		query: {
      			orgId: this.userDetail.enterpriseId,
      			projectId: orgId
      		}
      	})
      },
			// 获取动态管控详情
			getDtgkDetailData(id,type) {
				this.dtgkDetailData = {
					statistics: null,
					barData: {
						xData: [],
						yData: {
							firstRisk: [],
							secondRisk: [],
							thirdRisk: [],
							fourthRisk: []
						}
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
						lineDataY1: [],
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				};
				let reqData = {
					"controlTime": this.biDate,
					"id": id,
          "type": type
				};
				this.$api.bi.getDtgkDetailData(reqData).then(res => {
					if (res.code === 200) {
            this.dtgkDetailData.secondStatistics = res.data.secondStatistics;
						this.dtgkDetailData.totalZsfx = res.data.firstStatistics.total;
						this.dtgkDetailData.totalGcgk = res.data.thirdStatistics.total;
						this.dtgkDetailData.zsfxPie = [{
								value: res.data.firstStatistics.firstLevel || 0,
								name: 'I级风险',
							},
							{
								value: res.data.firstStatistics.secondLevel || 0,
								name: 'II级风险'
							},
							{
								value: res.data.firstStatistics.thirdLevel || 0,
								name: 'III级风险'
							},
							{
								value: res.data.firstStatistics.fourthLevel || 0,
								name: 'IV级风险'
							}
						];
						res.data.secondStatistics.forEach((item) => {
							this.dtgkDetailData.barData.xData.push(item.name);
							this.dtgkDetailData.barData.yData.firstRisk.push(item.firstLevel);
							this.dtgkDetailData.barData.yData.secondRisk.push(item.secondLevel);
							this.dtgkDetailData.barData.yData.thirdRisk.push(item.thirdLevel);
							this.dtgkDetailData.barData.yData.fourthRisk.push(item.fourthLevel);
						});

						this.dtgkDetailData.gcgkPie1 = [{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.doCount ? res.data.thirdStatistics.first
									.doCount : 0) : 0,
								name: '已管控',
							},
							{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.unDoCount ? res.data.thirdStatistics
									.first.unDoCount : 0) : 0,
								name: '未管控'
							}
						];
						this.dtgkDetailData.gcgkPie2 = [{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.doCount ? res.data.thirdStatistics
									.second.doCount : 0) : 0,
								name: '管控到位',
							},
							{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.unDoCount ? res.data.thirdStatistics
									.second.unDoCount : 0) : 0,
								name: '管控不到位'
							}
						];

						res.data.fourthStatistics.forEach((item) => {
							this.dtgkDetailData.lineData.lineDataX.push(item.name);
							this.dtgkDetailData.lineData.lineDataY.push(item.value[0]);
							this.dtgkDetailData.lineData.lineDataY1.push(item.value[1]);
						})
					} else {
						this.$Message.error(res.message)
					}
				})
			},

			// 获取动态管控详情二级
			getDtgkDetailEjData(id) {
				this.dtgkDetailEjData = {
					statistics: null,
					barData: {
						xData: ['I级风险', 'II级风险', 'III级风险', 'IV级风险'],
						yData: []
					},
					lineData: {
						lineDataX: [],
						lineDataY: [],
						lineDataY1: [],
					},
					zsfxPie: [],
					gcgkPie1: [],
					gcgkPie2: []
				};
				let reqData = {
					"controlTime": this.biDate,
					"id" : id
				}
				this.$api.bi.getDtgkEjDetailData(reqData).then(res => {
					if (res.code === 200) {
						this.dtgkDetailEjData.totalZsfx = res.data.firstStatistics.total;
						this.dtgkDetailEjData.totalGcgk = res.data.thirdStatistics.total;

						this.dtgkDetailEjData.barData.yData=[
							res.data.firstStatistics.firstLevel || 0,
							res.data.firstStatistics.secondLevel || 0,
							res.data.firstStatistics.thirdLevel || 0,
							res.data.firstStatistics.fourthLevel || 0,
						];
						this.dtgkDetailEjData.gcgkPie1 = [{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.doCount ? res.data.thirdStatistics.first
									.doCount : 0) : 0,
								name: '已管控',
							},
							{
								value: res.data.thirdStatistics.first ? (res.data.thirdStatistics.first.unDoCount ? res.data.thirdStatistics
									.first.unDoCount : 0) : 0,
								name: '未管控'
							}
						];
						this.dtgkDetailEjData.gcgkPie2 = [{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.doCount ? res.data.thirdStatistics
									.second.doCount : 0) : 0,
								name: '管控到位',
							},
							{
								value: res.data.thirdStatistics.second ? (res.data.thirdStatistics.second.unDoCount ? res.data.thirdStatistics
									.second.unDoCount : 0) : 0,
								name: '管控不到位'
							}
						];

						res.data.fourthStatistics.forEach((item) => {
							this.dtgkDetailEjData.lineData.lineDataX.push(item.name);
							this.dtgkDetailEjData.lineData.lineDataY.push(item.value[0]);
							this.dtgkDetailEjData.lineData.lineDataY1.push(item.value[1]);
						})
					} else {
						this.$Message.error(res.message)
					}
				})
			},
			dtNameClick(id, value, type){
				console.log(id,value)
				if(this.personType==1){
					this.dtgkClick(id,value,type)
				}else{
					this.gkxqClick(id,value)
				}
			},
			//动态管控详情
			dtgkClick(id, value, type) {
        console.log(type)
				this.dialogFlag = true;
				this.tempDialogTitle = this.dialogTitle = value +this.biDate.split("-")[0]+"年"+this.biDate.split("-")[1]+"月动态管控详情";
				this.zyfxDetail = false;
				this.dtgkDetail = true;
				this.dtgkEjDetail = false;
        this.fxycDetail = false;
				this.getDtgkDetailData(id,type);
			},

			gkxqClick(index, value) {

				this.dialogFlag = true;
				this.dialogTitle = value +this.biDate.split("-")[0]+"年"+this.biDate.split("-")[1]+"月动态管控详情(更多)";
				this.zyfxDetail = false;
				this.dtgkDetail = false;
				this.dtgkEjDetail = true;
        this.fxycDetail = false;
        if(this.personType == 1){
          this.jumpId = this.dtgkDetailData.secondStatistics[index].id;
        }else{
           this.jumpId = index;
        }

				this.getDtgkDetailEjData(this.jumpId);
			},
			dialogClose() {
				if (this.dtgkEjDetail && this.personType == 1) {
					this.zyfxDetail = false;
					this.dtgkDetail = true;
					this.dtgkEjDetail = false;
          this.fxycDetail = false;
          console.log(this.tempDialogTitle)
          this.dialogTitle = this.tempDialogTitle;
          this.tempDialogTitle = "";
				} else {
					this.dialogFlag = false;
          this.dialogTitle = this.tempDialogTitle = "";
				}
			},
			dialogTitleClick(){
				if(this.dtgkEjDetail){
					this.$router.push({
						name: 'dynamic-control-ledger',
						query: {
							orgId: this.userDetail.enterpriseId,
							projectId: this.jumpId,
							date:this.biDate
						}
					})
				}
			}


		}
	}
</script>



<style lang="scss">
	.bi {
		height: 100%;
		width: 100%;
		background-image: url('../../../src/assets/images/bi/bi_bj.png');
		background-repeat: no-repeat;
		overflow: hidden;
		.bi_data_content {
			height: 100%;
			padding: 0 16px 20px;
			position: relative;

			.date_selcet {
				position: absolute;
				right: 20px;
				top: -25px;

				.ivu-date-picker {
					width: 150px;
					height: 20px;
					line-height: 20px;
					background-color: #0F3A58;
					border-color: #0F3A58;

					.ivu-input-suffix i {
						height: 20px;
						line-height: 20px;
						color: #fff;
					}

					.ivu-input {
						height: 20px;
						line-height: 20px;
						background-color: #0F3A58;
						color: #fff;
						border-color: #0F3A58;
					}
				}
			}
		}

		.data_top {
			display: flex;
			justify-content: space-between;
			height: calc(50% - 7.5px);
		}

		.data_top>div {
			width: calc(50% - 7.5px);
			height: 100%;
			display: inline-block;
			background-image: url('../../../src/assets/images/bi/task_risk.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.data_bottom {
			display: flex;
			justify-content: space-between;
			height: calc(50% - 7.5px);
			margin-top: 15px;
		}
		.bi-modal {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-Index: 9999;

			.modal_box {
				position: absolute;
				width: 80%;
				height: 80%;
				background-image: url('../../../src/assets/images/bi/dialog.png');
				background-size: 100% 100%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0 auto;
				cursor: pointer;
			}

			.task_risk_close {
				position: absolute;
				text-align: center;
				font-size: 32px;
				color: #0CA8B6;
				right: 10px;
				top: 5px;
			}

			.dialog-title {
				position: absolute;
				top: 10px;
				left: 20px;
				color: #0BBECA
			}

			.fx-item {
				color: #fff;
				font-size: 12px;
				float: right;
				margin-top: 7%;
				margin-right: 50px;

				span:not(:last-child) {
					margin-right: 30px;
				}
			}

			.dialog_data {
				position: absolute;
				height: 60%;
				width: 80%;
				margin: 0px auto;
				top: 20%;
				left: 10%;
			}
		}
	}
</style>
